<template>
  <div class="page">
    <div class="task-list">
      <div class="task-header">
        <a-row>
          <a-col :span="18">
            <a-row>
              <a-col :span="6">
                <a-form-item label="" style="margin-left: 10px">
                  <a-input v-model:value="formState.name" placeholder="请输入任务名称" />
                </a-form-item>
              </a-col>
              <a-col :span="6" style="margin-left: 10px">
                <a-form-item>
                  <a-range-picker
                    v-model:value="value"
                    :disabledDate="disabledDate"
                    @change="onChange"
                    @openChange="onOpenChange"
                    @calendarChange="onCalendarChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="4" style="margin-left: 10px">
                <a-button type="primary">搜索</a-button>
                <a-button style="margin-left: 10px">重置</a-button>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="6" style="text-align: right">
            <a-button @click="goToTaskExecuteDetails">查看所有任务实例</a-button>
            <a-button style="margin-left: 10px" type="primary">添加任务</a-button>
          </a-col>
        </a-row>
      </div>
      <div class="option-box">
        <a-button style="margin-left: 10px" type="primary">批量启动</a-button>
        <a-button>批量复制</a-button>
        <a-button>批量删除</a-button>
      </div>
      <div class="task-table">
        <a-table
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :data-source="data"
        >
          <template #a="{ index }">
            <span>{{ index + 1 }}</span>
          </template>
          <template #d="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #e="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #f="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #g="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #active="{ record }">
            <a-button
              type="primary"
              shape="circle"
              size="small"
              @click="handleOption(record, 'IndexManagement')"
            >
              <template #icon>
                <FolderOutlined />
              </template>
            </a-button>
            <a-button type="primary" shape="circle" size="small" @click="handleOption(record, '1')">
              <template #icon>
                <BarChartOutlined />
              </template>
            </a-button>
            <a-button type="primary" shape="circle" size="small" @click="handleOption(record, '1')">
              <template #icon>
                <FormOutlined />
              </template>
            </a-button>
            <a-button type="primary" shape="circle" size="small" @click="handleOption(record, '1')">
              <template #icon>
                <CopyOutlined />
              </template>
            </a-button>
            <a-button type="primary" shape="circle" size="small" @click="handleOption(record, '1')">
              <template #icon>
                <DeleteOutlined />
              </template>
            </a-button>
            <a-button type="primary" shape="circle" size="small" @click="handleOption(record, '1')">
              <template #icon>
                <PlayCircleOutlined />
              </template>
            </a-button>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  FolderOutlined,
  BarChartOutlined,
  FormOutlined,
  CopyOutlined,
  DeleteOutlined,
  PlayCircleOutlined
} from "@ant-design/icons-vue";
import { defineComponent, reactive, ref, computed, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Moment } from "moment";
import { TableDataType, Key } from "@/shims/globe";
import { columns } from "./config";

export default defineComponent({
  components: {
    FolderOutlined,
    BarChartOutlined,
    FormOutlined,
    CopyOutlined,
    DeleteOutlined,
    PlayCircleOutlined
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const dates = ref<Moment[]>([]);
    const value = ref<Moment[]>();
    const formState = reactive({
      name: ""
    });
    const disabledDate = (current: Moment) => {
      if (!dates.value || dates.value.length === 0) {
        return false;
      }
      const diffDate = current.diff(dates.value[0], "days");
      return Math.abs(diffDate) > 7;
    };

    const onOpenChange = (open: boolean) => {
      if (open) {
        dates.value = [];
      }
    };

    const onChange = (val: Moment[]) => {
      value.value = val;
    };

    const onCalendarChange = (val: Moment[]) => {
      dates.value = val;
    };

    const data: TableDataType[] = [
      {
        key: "1",
        b: "潘婷日常圈数任务",
        c: "沙宣",
        d: "指标",
        e: "启用",
        f: "2021-08-30 18:11:34",
        g: "2021-08-30 18:11:34",
        type: "upload"
      },
      {
        key: "2",
        b: "沙宣日常圈数任务",
        c: "潘婷",
        d: "指标",
        e: "启用",
        f: "2021-08-30 18:11:34",
        g: "2021-08-30 18:11:34",
        type: "index"
      },
      {
        key: "3",
        b: "海飞丝日常圈数任务",
        c: "海飞丝",
        d: "文件上传",
        e: "未启用",
        f: "2021-08-30 18:11:34",
        g: "2021-08-30 18:11:34",
        type: "upload"
      }
    ];

    const state = reactive<{
      selectedRowKeys: Key[];
      loading: boolean;
    }>({
      selectedRowKeys: [], // Check here to configure the default column
      loading: false
    });
    const hasSelected = computed(() => state.selectedRowKeys.length > 0);

    const start = () => {
      state.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        state.loading = false;
        state.selectedRowKeys = [];
      }, 1000);
    };
    const onSelectChange = (selectedRowKeys: Key[]) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };

    const handleOption = (record: any, optionType: string) => {
      const { type } = record;
      console.log("type: ", type);
      switch (optionType) {
        case "IndexManagement":
          router.push({
            name: type === "index" ? "IndexManagement" : "UploadTaskDetails",
            query: { ...record }
          });
          break;
        case "":
          break;
      }
    };
    // 指标管理
    const goToTaskExecuteDetails = () => {
      router.push({
        name: "TaskExecuteList",
        query: {}
      });
    };

    return {
      formState,
      dates,
      value,
      disabledDate,
      onOpenChange,
      onChange,
      onCalendarChange,
      data,
      columns,
      hasSelected,
      ...toRefs(state),
      start,
      onSelectChange,
      goToTaskExecuteDetails,
      handleOption
    };
  }
});
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
